<template>
	<view class="h-full">
		<view class="h-full flex-col" v-if="DeviceType == 'pc'" style="margin-bottom: 30px">
			<view class="flex" style="margin-bottom: 16px;">
				<image style="width: 36px; height: 36px; margin-right: 8px;border-radius: 50%;"
					src="../static/avatar.png" mode="">
				</image>
				<view class="" style="
                        background: #fafcff;
                        border-radius: 12px;
                        border: 1px solid #eceff3;
                        padding: 8px 16px;
                        max-width: 70%;
                    ">
					<text style="
                            font-weight: 400;
                            font-size: 12px;
                            color: #212121;
                            line-height: 24px;
                        ">你好，我能帮你干什么？</text>
				</view>
			</view>

			<view class="flex-col" v-for="(item, index) in conversationMessages" :key="item.id">
				<view class="flex" style="margin: 0 0 16px 0">
					<view style="
                            margin-left: auto;
                            background: linear-gradient(
                                270deg,
                                #458bfb 0%,
                                #5f76fb 100%
                            );
                            border-radius: 8px 0px 8px 8px;
                            padding: 8px 16px;
                            max-width: 70%;
                        ">
						<text style="
                                font-weight: 400;
                                font-size: 12px;
                                color: #fff;
                                line-height: 24px;
                            ">{{ item.content }}</text>
					</view>
				</view>
				<view class="">
					<view class="flex" :style="{
                            marginBottom:
                                index + 1 == conversationMessages.length
                                    ? '40px'
                                    : '16px',
                        }">
						<image style="
                                width: 36px;
                                height: 36px;
                                margin-right: 8px;
                                min-width: 36px;
								border-radius: 50%;
                            " src="../static/avatar.png" mode="">
						</image>
						<view class="" style="
                                background: #fafcff;
                                border-radius: 12px;
                                border: 1px solid #eceff3;
                                padding: 8px 16px;
                                max-width: 70%;
                            ">
							<view v-if="!item.answer" class="flex items-center text-center">
								<img src="../static/loading.png" style="
                                        width: 24px;
                                        height: 24px;
                                        margin-right: 8px;
                                    " class="rotateAnimate" alt="" />
								<span style="font-size: 12px; color: #333">
									加载中...
								</span>
							</view>
							<view class="answerHtml" v-html="item.answer">
							</view>
							<!-- <text
								style="word-break: break-all;font-weight: 400;font-size: 14px;color: #212121;line-height: 24px;">{{item.answer}}</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 广告机 -->
		<!-- <view class="" v-if="DeviceType == 'AdvertisingMachine'">
			<view class="flex-col" v-for="item in conversationMessages">
				<view class="flex">
					<image style="width: 36px;height: 36px;margin-right: 8px;" src="../static/avatar.png" mode="">
					</image>
					<view class=""
						style="border:1px solid #FFF;background: url(~@@/static/wxitembg1.png) center center / 100% 100% no-repeat;border-radius: 12px;padding: 12px 16px;max-width: 70%;">
						<text
							style="font-weight: 400;font-size: 14px;color: #fff;line-height: 24px;">您赛季大数据濮大上课打视频大萨达您赛季大数据濮大上课打视频大萨达</text>
					</view>
				</view>
				<view class="flex" style="margin: 16px 0;">
					<view
						style="background: url(~@@/static/wxtextbg.png) center center / 100% 100% no-repeat;margin-left: auto;border-radius: 8px 0px 8px 8px;padding: 12px 16px;max-width: 70%;">
						<text
							style="font-weight: 400;font-size: 14px;color: #fff;line-height: 24px;">您赛季大数据濮大上课打视频大萨达您赛季大数据濮大上课打视频大萨达</text>
					</view>
				</view>
			</view>
		</view -->

		<!-- 微信 -->
		<!-- <view class="hsc" v-if="DeviceType == 'wxx'" style="height: 50vh;overflow-y: auto;margin-top: auto;">
			<view class="flex-col" v-for="item in conversationMessages">
				<view class="flex">

					<view class=""
						style="background: url(~@@/static/wxtextitem1.png) center center / 105% 105% no-repeat;border-radius: 12px;max-width: 70%;padding: 34px 30px 34px 47px;">
						<text
							style="font-weight: 400;font-size: 32px;color: #fff;line-height: 36px;">{{item.content}}</text>
					</view>
				</view>
				<view class="flex" style="margin: 16px 0;">
					<view
						style="background: url(~@@/static/wxitemtext.png) center center / 100% 100% no-repeat;margin-left: auto;border-radius: 8px 0px 8px 8px;padding: 29px 47px 30px;max-width: 70%;">
						<text
							style="font-weight: 400;font-size: 32px;color: #131416;line-height: 36px;">您赛季大数据濮大上课打视频大萨达您赛季大数据濮大上课打视频大萨达</text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getRuntimeEnv
	} from "@/utils/env.js";

	import {
		useConversationStore
	} from "../store";
	import {
		marked
	} from 'marked'
	export default {
		name: "conversation",
		props: {
			DeviceType: {
				type: String,
			},
		},
		data() {
			return {
				dataList: [],
				testtext: null
			};
		},
		computed: {
			conversationMessages() {
				const conversationStore = useConversationStore();
				return conversationStore.messages;
			},
		},
		watch: {
			conversationMessages: {
				deep: true,
				handler() {
					this.$nextTick(() => {
						this.bindImageClickEvents();
					});
				},
			},
		},

		mounted() {
			const ConversationStore = useConversationStore();
			this.dataList = ConversationStore.messages;
			this.bindImageClickEvents();
			this.testtext = marked('### 测试标题')
		},
		methods: {

			bindImageClickEvents() {
				this.$nextTick(() => {
					const container = this.$el; // 当前组件的根元素
					const images = container.querySelectorAll(".answerHtml img");
					console.log(images);
					images.forEach(img => {
						// 避免重复绑定
						if (!img._listenerAdded) {
							img._listenerAdded = true;
							img.addEventListener("click", e => {
								const src = e.target.src;
								console.log("图片被点击:", src);
								this.handleImageClick(src);
							});
						}
					});
				});
			},
			handleImageClick(src) {
				// 自定义处理函数
				uni.previewImage({
					current: src,
					urls: [src],
				});
			},
			checkEnvironment() {
				const env = getRuntimeEnv();
				if (env === "WEAPP") {
					console.log("微信小程序环境");
				} else if (env === "WECHAT_PUBLIC") {
					console.log("微信公众号环境");
				} else {
					console.log("普通网页环境");
				}
			},
		},
	};
</script>

<style>
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.rotateAnimate {
		animation: rotate 1s linear infinite;
	}

	.answerHtml {
		font-size: 12px;
	}

	.answerHtml img,
	.answerHtml uni-image {
		display: flex;
		width: 70% !important;
		margin: 5px auto;
	}
</style>